<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iOS8风格loading加载进度条代码</title>

<script type="text/javascript" src="js/prefixfree.min.js"></script>

<style type="text/css">
.load_body {
  background-color: #f5f7f9;
  color: #6c6c6c;
	width: 100vw;
	height: 100vh;
  /*font: 300 1em/1.5em;*/

}
.container {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

/* PROGRESS */
.progress {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 24em;
}
.progress-bar {
	animation-delay: 0.1s;
	animation-duration: 3s;
	animation-name: width;
	background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
	background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
	background-size: 24em 0.25em;
	height: 100%;
	position: relative;
}
.progress-shadow {
  background-image: linear-gradient(to bottom, #eaecee, transparent);
  background-image: -webkit-linear-gradient(to bottom, #eaecee, transparent);
  height: 4em;
  position: absolute;
  top: 100%;
  transform: skew(45deg);
  transform-origin: 0 0;
  width: 100%;
}

/* ANIMATIONS */
@keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@font-face {
	font-family: 帅;
	src: url("font/font2.ttf");
}

/*淡入代码部分*/
@keyframes fade-in {
	0% {opacity: 0;}/*初始状态 透明度为0*/
	80% {opacity: 1;}/*过渡状态 透明度为0*/
	100% {opacity: 0;}/*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {/*针对webkit内核*/
	0% {opacity: 0;}
	80% {opacity: 1;}
	100% {opacity: 0;}
}
.role-in {
	animation: fade-in;/*动画名称*/
	animation-duration: 4s;/*动画持续时间*/
	-webkit-animation:fade-in 4s;/*针对webkit内核*/
}

</style>
</head>
<body>
<div class="load_body">
	<div class="role-in role-out">
		<!-- 代码 开始 -->
		<div class="container">
			<div style="text-align: center">
		<span style="border-bottom: solid 1px #6ad0ff">
			欢迎来到 <span style="font-family: 帅;font-size: 41px">中俄</span>学院
		</span>
				<br>
				<span style="font-size: 10px">
			Добро пожаловать в китайско - российский институт
		</span>
			</div>

			<div class="progress">
				<div class="progress-bar">
					<div class="progress-shadow"></div>
				</div>
			</div>
		</div>
		<!-- 代码 结束 -->
	</div>
</div>




</body>
</html>